import { history } from 'umi';
import React from 'react';
import { Flex, Image, Sticky, Swiper, Button, Typography, Divider, Tabbar, NoticeBar } from 'react-vant';
import { SafeArea } from 'antd-mobile';
import { ArrowLeft, Manager, LikeO, Diamond, Clock, Chat, InfoO } from '@react-vant/icons';
import { Female, PlayOne } from '@icon-park/react';
import './partner.less';

const goBack = () => {
  history.back();
}
const goOrder = () => {
  history.push('/order');
}

export default function PartnerPage() {
  return (
    <div className='partner'>
      <Sticky>
        <div className='partner-header'>
          <Flex align='center' justify='between'>
            <Flex.Item>
              <Flex align='center'>
                <Flex.Item className='back' onClick={goBack}>
                  <ArrowLeft fontSize='1.5em' className='icon-back' />
                </Flex.Item>
                <Flex.Item>
                  <Flex gutter={10} align='center'>
                    <Flex.Item>
                      <Image round width='32' height='32' fit='cover'
                             src='//res.dayupp.com/partner/9fa863d7ab9db21d6763ad29fa4695c1.jpg' />
                    </Flex.Item>
                    <Flex.Item>
                      <h3 className='nickname'>小熊</h3>
                    </Flex.Item>
                    <Flex.Item>
                      <Flex gutter={2} align='center' className='partner-age'>
                        <Flex.Item><Female className='gender-icon' theme='outline' /></Flex.Item>
                        <Flex.Item>23</Flex.Item>
                      </Flex>
                    </Flex.Item>
                    <Flex.Item className='partner-auth'>
                      真人认证
                    </Flex.Item>
                  </Flex>
                </Flex.Item>
              </Flex>
            </Flex.Item>
            <Flex.Item className='partner-status'>
              <div className='kong'><i className='dot'></i>空闲</div>
            </Flex.Item>
          </Flex>
        </div>
      </Sticky>
      <div className='partner-swiper'>
        <Swiper indicator={(total, current) => (
          <div className='custom-indicator'>
            {current + 1} <span>/</span> {total}
          </div>
        )}>
          <Swiper.Item className='partner-swiper-item swiper-video'>
            <video preload='auto' className='big-video'
                   poster='//res.dayupp.com/partner/e2bea1fa0ef38542f4e382ddccad8994.mp4?x-oss-process=video/snapshot,t_0,f_jpg'>
              <source src='//res.dayupp.com/partner/e2bea1fa0ef38542f4e382ddccad8994.mp4' type='video/mp4' />
              <source src='' type='video/ogg' />
              您的浏览器不支持视频标签。
            </video>
            <PlayOne className='big-play-btn' theme='filled' size='48' fill='#fff' />
          </Swiper.Item>
          <Swiper.Item className='partner-swiper-item'>
            <Image lazyload className='photo' fit='cover' src='//res.dayupp.com/partner/2f49c01e5bfa4a43576c82b0ce11aa87.jpg' />
          </Swiper.Item>
          <Swiper.Item className='partner-swiper-item'>
            <Image lazyload className='photo' fit='cover' src='//res.dayupp.com/partner/6546da46f1d883b88b25593baa6d1b88.jpg' />
          </Swiper.Item>
          <Swiper.Item className='partner-swiper-item'>
            <Image lazyload className='photo' fit='cover' src='//res.dayupp.com/partner/aa6a27ee80011b9f4d995748bfeec5a7.jpg' />
          </Swiper.Item>
        </Swiper>
        <div className='follow'>
          <Button className='like' round icon={<LikeO />} iconPosition='left' size='small'
                  color='linear-gradient(to right, #ff5980, #ff78b0)'>
            关注
          </Button>
        </div>
        <div className='ip'>IP属地：武汉</div>
      </div>
      <div className='partner-info container'>
        <Flex align='center' className='hd-title mtb10'>
          <Flex.Item><Manager fontSize='1.25em' className='title-icon' /></Flex.Item>
          <Flex.Item>个人资料 <span className='partner-id'>ID: 223</span></Flex.Item>
        </Flex>
        <Flex align='center' className='info mtb10'>
          <Flex.Item>170cm <span>|</span> 48kg <span>|</span> 射手座</Flex.Item>
        </Flex>
        <Flex align='center' className='tags mtb10'>
          <Flex.Item>
            <div className='tag tag1'>密室达人</div>
            <div className='tag tag2'>酒搭子</div>
            <div className='tag tag3'>氛围制造者</div>
          </Flex.Item>
        </Flex>
        <Flex align='center' className='intro mtb10'>
          <Flex.Item>
            <Typography.Text
              ellipsis={{
                rows: 2,
                collapseText: '收起',
                expandText: '展开',
              }}
            >
              可动可静，喜欢运动。羽毛球、篮球都打得不错。欢迎老板找我玩哟~ 可动可静，喜欢运动。羽毛球、篮球都打得不错。欢迎老板找我玩哟~
            </Typography.Text>
          </Flex.Item>
        </Flex>
      </div>
      <div className='container'>
        <div className='photo-list'>
          <Flex gutter={10}>
            <Flex.Item className='video-box'>
              <video preload='auto' className='video'
                     poster='//res.dayupp.com/partner/e2bea1fa0ef38542f4e382ddccad8994.mp4?x-oss-process=video/snapshot,t_0,f_jpg'>
                <source src='//res.dayupp.com/partner/e2bea1fa0ef38542f4e382ddccad8994.mp4' type='video/mp4' />
                <source src='' type='video/ogg' />
                您的浏览器不支持视频标签。
              </video>
              <PlayOne className='play-btn' theme='filled' size='32' fill='#fff' />
            </Flex.Item>
            <Flex.Item className='photo-item'><Image lazyload fit='cover' src='//res.dayupp.com/partner/2f49c01e5bfa4a43576c82b0ce11aa87.jpg'
                                                   alt='' /></Flex.Item>
            <Flex.Item className='photo-item'><Image lazyload fit='cover' src='//res.dayupp.com/partner/050b7f06be14e84c6b82d06752dbca39.jpg'
                                                   alt='' /></Flex.Item>
            <Flex.Item className='photo-item'><Image lazyload fit='cover' src='//res.dayupp.com/partner/6546da46f1d883b88b25593baa6d1b88.jpg'
                                                   alt='' /></Flex.Item>
            <Flex.Item className='photo-item'><Image lazyload fit='cover' src='//res.dayupp.com/partner/55a4fb66e1c93c376f507cbaa8f8ccb0.jpg'
                                                   alt='' /></Flex.Item>
          </Flex>
        </div>
      </div>
      <div className='partner-events container'>
        <Flex align='center' className='hd-title mtb10'>
          <Flex.Item><Diamond fontSize='1.25em' className='title-icon' /></Flex.Item>
          <Flex.Item>选择约玩项目</Flex.Item>
        </Flex>
        <div className='event-list choose'>
          <Flex justify='start' gutter={10} wrap='wrap'>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/ce256b9a6227ae7a77f7c470f495e488.png' alt='' />
                <p>线下开黑</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/59809efe258fbcc037298776bdd41b6b.png' alt='' />
                <p>线上陪练</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/a996962cdf0789e3749f11aca41a5b3f.png' alt='' />
                <p>共进晚餐</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/13e9c6b3a1ea7ab9741ff1c8c086bbd5.png' alt='' />
                <p>微醺小酌</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/a20a94966c2fa6dd31413c55334e3894.png' alt='' />
                <p>一起观影</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item active'>
                <img className='type-icon' src='//res.dayupp.com/partner/b7f5ab6607f0da8c930a2d3a1796e800.png' alt='' />
                <p>台球助教</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/d4163e8c1492e1c2af9a2c607d19a74e.png' alt='' />
                <p>密室逃脱</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/fdb0314e3a3eb47e30049f6bb7ff2caa.png' alt='' />
                <p>一起散步</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/ae139c3bd22b33074f047fc6ca06dafe.png' alt='' />
                <p>一起唱歌</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/11915b92953901e2db8264d196cb870d.png' alt='' />
                <p>剧本桌游</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/63b29a07f946cd333358924055733a98.png' alt='' />
                <p>旅游向导</p>
              </div>
            </Flex.Item>
            <Flex.Item span={6}>
              <div className='item'>
                <img className='type-icon' src='//res.dayupp.com/partner/1f646b0cead757771829ad5ceb21d8c3.png' alt='' />
                <p>连麦聊天</p>
              </div>
            </Flex.Item>
          </Flex>
        </div>
      </div>
      <div className='partner-time container'>
        <Flex align='center' className='hd-title mtb10'>
          <Flex.Item><Clock fontSize='1.25em' className='title-icon' /></Flex.Item>
          <Flex.Item>选择约玩时间</Flex.Item>
        </Flex>
        <div className='date-list choose'>
          <Flex justify='center' gutter={10} wrap='wrap'>
            <Flex.Item span={8}>
              <div className='item active'>
                <p className='day'>今天</p>
                <p className='date'>2024-06-15</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p className='day'>明天</p>
                <p className='date'>2024-06-16</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p className='day'>后天</p>
                <p className='date'>2024-06-17</p>
              </div>
            </Flex.Item>
          </Flex>
        </div>
        <Divider className='choose-time'>请选择大概时间段</Divider>
        <div className='time-list choose'>
          <Flex justify='center' gutter={10} wrap='wrap'>
            <Flex.Item span={8}>
              <div className='item active'>
                <p>现在</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p>11:00 ~ 14:00</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p>14:00 ~ 17:00</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p>17:00 ~ 20:00</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p>20:00 ~ 23:00</p>
              </div>
            </Flex.Item>
            <Flex.Item span={8}>
              <div className='item'>
                <p>23:00 ~ 02:00</p>
              </div>
            </Flex.Item>
          </Flex>
        </div>
      </div>
      <div className='container'>
        <NoticeBar
          className='partner-notice'
          color='#888'
          leftIcon={<InfoO />}
          text='陪玩的空闲状态更新不一定及时，下单前最好先联系客服进行确认！'
        />
      </div>
      <div className='partner-submit-bar'>
        <Tabbar placeholder>
          <div className='container'>
            <Flex align='center' justify='between' className='submit-area'>
              <Flex.Item>
                <Button round plain className='btn-service' color='#43cf7c' size='small' icon={<Chat />}>客服</Button>
              </Flex.Item>
              <Flex.Item>
                <Flex align='center'>
                  <Flex.Item className='submit-price'>¥<span>200</span>.00</Flex.Item>
                  <Flex.Item className='submit-label'>元/小时</Flex.Item>
                  <Flex.Item><Button className='submit-btn' round type='primary'
                                     color='linear-gradient(to right, #ff78b7, #ff5959)' onClick={goOrder}>提交订单</Button></Flex.Item>
                </Flex>
              </Flex.Item>
            </Flex>
          </div>
        </Tabbar>
        <SafeArea position='bottom' />
      </div>
    </div>
  );
}
